<template>
  <div>
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-row>
        <el-col :span="24">
          <el-form-item prop="payeeName" label="收款人姓名">
            <el-input v-model="form.payeeName" placeholder="收款人姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="cardNumber" label="收款账号">
            <el-input v-model="form.cardNumber" placeholder="收款账号" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item prop="bank" label="开户银行">
            <el-input v-model="form.bank" placeholder="开户银行" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="dialong__button--wrap">
      <el-button @click="close">取消</el-button>
      <el-button :loading="subLoading" type="primary" @click="setListData">保存</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, unref, PropType } from 'vue'
import { Message } from '_c/Message'
import { InfoWriteParams, InfoWriteRules } from './types'
import { setTeacherApi } from '../api'

const requiredRule = {
  required: true,
  message: '该项为必填项'
}

export default defineComponent({
  name: 'IfnoWrite',
  props: {
    info: {
      type: Object as PropType<any>,
      default: () => null
    }
  },
  emits: ['close', 'success'],
  setup(props, { emit }) {
    const formRef = ref<HTMLElement | null>(null)
    const editorRef = ref<HTMLElement | null>(null)
    const subLoading = ref<boolean>(false)
    const form = reactive<InfoWriteParams>({
      payeeName: '', // 收款人姓名
      cardNumber: '', // 收款卡号
      bank: '' // 收款银行
    })

    const rules = reactive<InfoWriteRules>({
      payeeName: [requiredRule],
      cardNumber: [requiredRule],
      bank: [requiredRule]
    })

    // 新增或者编辑
    function setListData() {
      const formRefWrap = unref(formRef as any)
      const editorRefWrap = unref(editorRef as any)
      try {
        subLoading.value = true
        formRefWrap.validate(async(valid: boolean) => {
          if (valid) {
            const formData = unref(form)
            const res = await setTeacherApi({
              data: formData
            })
            if (res) {
              Message.success('绑定成功')
              emit('success', 'add')
            }
          } else {
            console.log('error submit!!')
            return false
          }
        })
      } catch (err) {
        console.log(err)
      } finally {
        subLoading.value = false
      }
    }

    function close() {
      emit('close')
    }

    return {
      formRef, editorRef,
      subLoading,
      form,
      rules,
      setListData,
      close
    }
  }
})
</script>

<style>
</style>
